<template>
	<view class="category">
		<view class="title-page">
			<view :style="{ height: statusBarHeight }" class="uni-status-bar">

			</view>
			<view class="title">
				分类
			</view>
		</view>
		 
		<view class="check-shop-address">
			<!-- <view class="content" @tap="addressClick">
				<view class="left-img centent">
					<image :src="categoryIcon" class="auto-img"></image>
				</view>
				<view class="shop-info">
					<view class="shop-name">
						农夫山泉帮你吖店（长沙）
						<view class="right-img center">
							<image :src="rightIcon" class="auto-img"></image>
						</view>
					</view>
					<view class="long">
						<span class='span-1'>距离您</span>
						<span class='span-2'>1.5km</span>
					</view>
				</view>
			</view> -->
			<checkAddress @click='checkAddressClick' :shopAddressName='shopAddressName'></checkAddress>
		</view>
		
		<view class="content-block" :style="contentStyle">
			<view class="left-block">
				<scroll-view class="scroll-left-class" :scroll-y="true">
					<block v-for="(item,index) in categoryLst" :key="index">
						<view class="left-item" @tap="leftItemClick(index,item.name)"
							:class="leftIndexCurrent==index?'item-check':'no-check'">
							{{item.name}}
						</view>
					</block>
				</scroll-view>
			</view>

			<view class="right-block">
				<view class="right-item-name">
					{{categoryName}}
				</view>
				<scroll-view class="scroll-right-class" :scroll-y="true">
					 <template v-if="goods.length>0">
						 <block v-for="(item,index) in goods" :key="index">
						 	<item @itemClick='shopItemClick' :item='item'></item>
						 </block>
					 </template>
					 <template v-if="goods.length==0">
						<view class="no-emty" style="font-size: 26rpx;color: #999;">暂无对应的分类商品</view>
					 </template>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import checkAddress from '@/pages/tabbar/index/components/checkAddress.vue'
	import item from '@/pages/tabbar/category/components/item.vue'
	export default {
		components: {
			item,
			checkAddress
		},
		data() {
			return {
				statusBarHeight: 20,
				contentStyle: '',
				leftIndexCurrent: 0,
				 
				categoryLst: [],
				categoryName: "",
				categoryId: '',
				page:0,
				goods:[],
				shopAddressName: '', //附近的店铺名字
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {
		this.shopAddressName = uni.getStorageSync('shopAddress')	
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
			let contentHeight = (uni.getSystemInfoSync().statusBarHeight * 2) + 88 + 70
			let contentHeightStyle = `height: calc(100vh - ${contentHeight}rpx);`
			console.log('contentHeightStyle', contentHeightStyle)
			this.contentStyle = contentHeightStyle
		},
		 
		methods: {
			init() {
				this.$http('category.categoryLst').then(res => {
					if (res.code == 200) {
						this.categoryLst = res.data.list
						this.categoryName = res.data.list[0].name
						this.categoryId = res.data.list[0].id
						this.getCategoryId()
					}
				})
			},
			checkAddressClick() {
				uni.navigateTo({
					url: '/pages/nearby/nearby'
				})
			},
			getCategoryId(){
				this.$http('category.categoryById',{
					token:'',
					page:this.page,
					synthesize:0,
					sales_volume_rank:0,
					price_rank:0,
					status:0,
					category_id:this.categoryId
				}).then(res => {
						 
					if (res.code == 200) {
						this.goods=res.data.data
					}else{
						this.goods=[]
					}
				})
			},
			leftItemClick(index, name) {
			
				this.categoryName = name
				this.leftIndexCurrent = index
				this.categoryId=this.categoryLst[index].id
				this.getCategoryId()
			},
			shopItemClick(item) {
				uni.navigateTo({
					url: '/pages/shopDetail/shopDetail?goodsId=' + item.id
				})
			},
			 
			addressClick() {
				uni.navigateTo({
					url: '/pages/nearby/nearby'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.category {
		height: 100vh;
	}

	.title-page {
		background: linear-gradient(135.25deg, rgba(255, 207, 1, 1) 0%, rgba(255, 191, 0, 1) 100%), linear-gradient(175.05deg, rgba(106, 221, 214, 1) 0%, rgba(86, 179, 250, 1) 100%);
		position: relative;
	}

	.title-page::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		height: 70rpx;
		background: linear-gradient(135.25deg, rgba(255, 207, 1, 1) 0%, rgba(255, 191, 0, 1) 100%), linear-gradient(175.05deg, rgba(106, 221, 214, 1) 0%, rgba(86, 179, 250, 1) 100%);
	}

	.uni-status-bar {
		height: 20px;
	}

	.title {
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		height: 88rpx;
		color: rgba(0, 0, 0, 1);

	}

	.check-shop-address {
		position: relative;
		z-index: 11;
		left: 0rpx;
		right: 0rpx;
		height: 70rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background: #fff;
		display: flex;
		align-items: flex-end;
		// border: 1rpx solid red;
		padding: 0 14rpx;
		.content {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: flex-end;
			margin: 0rpx 24rpx 0rpx 24rpx;
			border-bottom: 2rpx solid rgba(238, 238, 238, 1);

		}

		.left-img {
			flex: none;
			width: 78rpx;
			height: 114rpx;

		}

		.shop-info {
			margin-left: 18rpx;
			flex: auto;
			display: flex;
			flex-direction: column;


			.shop-name {
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(27, 25, 25, 1);
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.right-img {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.long {
				margin-bottom: 18rpx;
				font-size: 24rpx;

				.span-1 {
					color: rgba(102, 102, 102, 1);
				}

				.span-2 {
					margin-left: 12rpx;
					color: rgba(20, 20, 20, 1);
				}
			}

		}

		.right-btn {
			margin-left: 24rpx;
			flex: none;
			width: 148rpx;
			line-height: 52rpx;
			text-align: center;
			background: rgba(255, 195, 0, 0.22);
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(20, 20, 20, 1);
			border-radius: 142rpx;
			margin-bottom: 42rpx;
		}
	}

	.content-block {

		width: 100%;
		display: flex;
		align-items: center;

		.left-block {
			flex: none;
			height: 100%;

			.scroll-left-class {
				width: 160rpx;
				height: 100%;
				background: rgba(245, 245, 245, 1);

				.left-item {
					font-size: 28rpx;
					text-align: center;
					line-height: 100rpx;
					position: relative;
				}

				.no-check {
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}

				.item-check {
					background: #fff;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);
				}

				.item-check::after {
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					top: 30rpx;
					right: 0;
					width: 8rpx;
					height: 40rpx;
					background: rgba(255, 200, 47, 1);

				}
			}

		}

		.right-block {
			flex: auto;
			background: #fff;
			height: 100%;

			.right-item-name {
				line-height: 100rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
			}

			.scroll-right-class {
				height: calc(100% - 100rpx);

			}


		}

	}
	.no-emty{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
	}
</style>
